<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VGroup>
          <el-select v-model="form.input.type" style="width: 130px">
            <el-option label="采购单号" value="purchase_no"></el-option>
            <el-option label="平台单号" value="platform_order_no"></el-option>
            <el-option label="计划单号" value="plan_no"></el-option>
            <el-option label="样品单号" value="source_no"></el-option>
            <el-option label="付款单号" value="payment_no"></el-option>
            <el-option label="跟踪号" value="tracking_no"></el-option>
            <el-option label="合同单号" value="contact_no"></el-option>
          </el-select>
          <VBatchInput v-model="form.input.value" class="w-60" @search="query" />
        </VGroup>
        <VGroup>
          <el-select v-model="form.skuInfo.type" class="w-28">
            <el-option label="sku" value="sku"></el-option>
            <el-option label="赛盒SKU" value="sai_he_sku"></el-option>
            <el-option label="自定义sku" value="custom_sku"></el-option>
          </el-select>
          <el-input v-model="form.skuInfo.value" placeholder="请输入" class="w-40"></el-input>
        </VGroup>
        <VSelect v-model="form.supplier_name" placeholder="供应商" type="supplierName" allow-create style="min-width: 200px" multiple
          collapse-tags clearable filterable />
        <VSelect v-model="form.order_source" placeholder="订单来源" :options="options.order_source || []" multiple
          collapse-tags filterable clearable style="min-width: 160px" />
        <VSelect v-model="form.destination_warehouse" placeholder="目的仓库" type="warehouse156" multiple collapse-tags
          filterable clearable style="min-width: 160px" />
        <VSelect v-model="form.purchase_type" placeholder="供应商类型" :options="options.purchase_type || []" multiple
          collapse-tags filterable clearable style="min-width: 160px" />
        <VSelect v-model="form.period_id" placeholder="结算方式" type="period" multiple collapse-tags filterable clearable
          style="min-width: 220px" />
        <VSelect v-model="form.company_id" placeholder="公司主体" :options="options.company_id || []" multiple
          collapse-tags filterable clearable style="min-width: 220px" />
          <VCascader v-model="form.purchase_user_id" placeholder="采购人员" multiple collapse-tags filterable clearable
          style="min-width: 160px" />
        <VSelect v-model="form.purchase_status" placeholder="采购状态" :options="options.purchase_status || []" multiple
          collapse-tags filterable clearable style="min-width: 160px" />
        <VSelect v-model="form.finance_status" placeholder="财务状态" :options="options.finance_status || []" multiple
          collapse-tags filterable clearable style="min-width: 160px" />
          <VSelect v-model="form.is_complete" placeholder="是否完结" :options="[{label: '已完结', value: 1},{label: '未完结', value: 2}]" multiple
          collapse-tags filterable clearable style="min-width: 160px" />
          <VSelect v-model="form.source_type" placeholder="来源类型" :options="options.bill_type || []" multiple
            collapse-tags filterable clearable style="min-width: 160px" />
        <VGroup>
          <div class="v-group-item">入库时间</div>
          <VDate v-model="form.inboundDate.value" />
        </VGroup>
        <VGroup>
          <div class="v-group-item">最后审核时间</div>
          <VDate v-model="form.auditDate.value" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <VButton auth="/purchase/manage/supplier/process" type="primary" @click="handleBatch('add')"><svg-icon icon-class="sc" class="mr-1" style="font-size: 15px"/>生成对账单</VButton>
        <VTotal :options="[{ title: '入库总金额', key: 'inboundPrice' }]" :data="totalMoney" class="ml-auto mr-2" />
        <VExport auth="/purchase/manage/supplier/export" mainKey="sb_id" name="supplier_bill" :tableRef="tableRef" task />
      </template>
    </VTable>
    <Add ref="addRef" :options="options" @success="query" />
  </VPage>
</template>
  
<script setup lang="jsx" name="Account">
import api from './api'
import Add from './components/Add'

import VTotal from '@/components/VTotal'
import { getOption } from '@/api/public'
import { ElMessage, ElMessageBox } from 'element-plus'

const baseName = 'purchase'
const tableRef = ref()
const historeRef = ref()
const loadings = reactive({})
// 查询
const query = () => {
  tableRef?.value.query()
}

// 添加
const addRef = ref()

// 获取options
const options = ref({})
Promise.all([
  getOption({ type: baseName }).then(res => res.data),
  getOption({ type: 'payment' }).then(res => res.data),
  getOption({ type: 'supplier' }).then(res => res.data),
  Promise.resolve({ test: [{ label: '没有数据', value: 1 }] })
]).then(res => {
  options.value = res.reduce((acc, cur) => (((acc = { ...acc, ...cur }), acc)), {})
})

const handleBatch = (name) => {
  const selection = tableRef.value.$table.getCheckboxRecords()
  if (!selection.length) {
    ElMessage.warning('请先选择行')
    return
  }
  const ps_ids = selection.map(d => d.ps_id)
  const showLoading = () => loadings[name] = true
  const closeLoading = () => loadings[name] = false
  const handle = {
    add: () => {
      addRef?.value.open(selection)
    },
  }
  handle[name]()
}
// 列表配置
const totalMoney = ref({})
const tableOptions = reactive({
  rowConfig: { height: 50 },
  showHeaderOverflow: false,
  formConfig: {
    data: {
      input: { type: 'purchase_no', value: '' },
      skuInfo: { type: 'sku', value: '' },
      inboundDate: { type: 'create_time', value: [], range: true },
      auditDate: { type: 'audit_time', value: [], range: true },
    }
  },
  columns: [
    { type: 'checkbox', width: 40, fixed: 'left' },
    { title: '供应商名称', field: 'supplier_name', width: 200, slots: {
      default: ({row}) => <VText value={row.supplier_name} line={2} />
    }  },
    { title: '供应商id', field: 'supplier_code', width: 80 },
    { title: '采购员', field: 'purchase_user', width: 150, slots: {
      default: ({row}) => <VText value={row.purchase_user} line={2} />
    } },
    { title: '结算方式', field: 'period_name', width: 140, slots: {
      default: ({row}) => <VText value={row.period_name} line={2} />
    } },
    { title: '公司主体', field: 'company_name', width: 200, slots: {
      default: ({row}) => <VText value={row.company_name} />
    } },
    { title: '目的仓', field: 'inbound_warehouse_list', width: 120, slots: {
      default: ({row}) => <VText value={row.inbound_warehouse_list.join(',')} />
    } },
    { title: '采购单号', field: 'purchase_no', width: 150 },
    { title: 'sku', field: 'sku', width: 100 },
    { title: '入库日期', field: 'create_time', width: 170 },
    { title: '下单数量', field: 'purchase_num', width: 100 },
    {
      title: '下单单价', field: 'unit_price_tax', width: 100, slots: {
        default: ({ row }) => row.is_drawback === 2 ? row.unit_price_tax : row.unit_price
      }
    },
    { title: '运费', field: 'tracking_price', width: 100 },
    { title: '优惠', field: 'discount_price', width: 100 },
    {
      title: '下单金额', field: 'total_price_tax', width: 120, slots: {
        default: ({ row }) => row.is_drawback === 2 ? row.total_price_tax : row.total_price
      }
    },
    { title: '本次入库数量', field: 'num', minWidth: 100, },
    { title: '批次入库汇总数量', field: 'total_num', minWidth: 100, },
    { title: '总入库汇总数量(累计)', field: 'add_inbound_num', minWidth: 100, },
    { title: '总入库汇总数量(总计)', field: 'sku_total_inbound_num', minWidth: 100, },
    { title: '来源类型', field: 'source_type_name', width: 80 },
    { title: '来源单号', field: 'source_no', width: 210, slots: {
      default: ({row}) => <VText value={row.source_no} copy />
    } },
    // { title: '入库数量', field: 'num', width: 100 },
    { title: '未税报价入库金额', field: 'inbound_price', width: 100 },
    { title: '入库金额', field: 'total_inbound_price', width: 100 },
    { title: '含税入库金额', field: 'inbound_price_tax', width: 110, },
    { title: '已付金额', field: 'payment_price', width: 100 },
    { title: '未付金额', field: 'not_pay_price', width: 100 },
    { title: '采购单是否完结', field: 'is_complete', width: 120 },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page }).then(res => {
        totalMoney.value = res.data.totalMoney
        return res
      })
    },
    props: {
      result: 'data.list',
      total: 'total'
    }
  }
})
</script>
  